<template>
	<div class="designer-box">
		<div class="desinger-head">
			<desinger-head v-model="headModel" @clearDesingerData="clearDesingerData" />
		</div>
		<div class="content">
			<control-form v-model="desingerModel" v-show="headModel.select == 'desinger'" />
			<sources-form v-model="desingerModel" v-show="headModel.select == 'sources'" />
		</div>
		<div class="bottom"></div>
	</div>
</template>

<script setup>
import desingerHead from './head.vue';
import sourcesForm from "./sources.vue";
import controlForm from "./form";
const headModel = reactive({ select: "desinger" });
const desingerModel = defineModel();
const clearDesingerData = () => {
	desingerModel.value.form = [];
};
</script>

<style scoped>
.designer-box {
	background-color: #fff;

	.desinger-head {
		height: 40px;
		display: flex;
		align-items: center;
		border-radius: 7px;
	}

	.content {
		width: 100%;
		height: calc(100% - 80px);
		margin: auto auto;
	}

	.bottom {
		height: 40px;
		border-top: 1px solid #eee;
	}
}
</style>